<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>光谱记录管理</title>
    <%-- 全站样式 --%>
    <jsp:include page="/WEB-INF/jsps/template_style.jsp"></jsp:include>
    
</head>

<body class="page-body skin-navy">
<div class="page-container">
   		<%--侧边栏 --%>
		<jsp:include page="/WEB-INF/jsps/sidebar.jsp"></jsp:include>
    <div class="main-content">
        <%--导航栏 --%>
		<jsp:include page="/WEB-INF/jsps/navbar.jsp"></jsp:include>
        <div class="page-title">
            <div class="title-env">
                <h1 class="title">光谱类型管理</h1>
                <p class="description">
                    您可以在此页面上添加和查看所有的光谱类型。
                </p>
            </div>
        </div>
        <div class="row">
            <div class="panel panel-default panel-tabs">
                <!-- Add class "collapsed" to minimize the panel -->
                <div class="panel-heading">
                    <h3 class="panel-title">光谱类型</h3>
                </div>
                <div class="panel-body">
                    <div class="tab-content">
                        <div class="tab-pane active" id="user">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <div class="col-md-offset-10">
                                        <button
                                                class="btn btn-info btn-sm btn-icon icon-left btn-default" data-toggle="modal" data-target="#add">添加光谱类型
                                        </button>
                                    </div>
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th>用户编号</th>
                                            <th>光谱名称</th>
                                            <th>光谱操作</th>
                                            <th>光谱记录状态</th>
                                            <th>操作时间</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody class="middle-align" id="middle-align">
                                        <tr>
                                            <td>1</td>
                                            <td>拉曼光谱</td>
                                            <td>导出</td>
                                            <td>可访问</td>
                                            <th>2017-5-5</th>
                                            <td>
                                                <a data-userID="4"
                                                   class="userDetail btn btn-info btn-sm btn-icon icon-left" data-toggle="modal" data-target="#detail">详细信息</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>1</td>
                                            <td>拉曼光谱</td>
                                            <td>导出</td>
                                            <td>可访问</td>
                                            <th>2017-5-5</th>
                                            <td>
                                                <a data-userID="4"
                                                   class="userDetail btn btn-info btn-sm btn-icon icon-left">详细信息</a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
		<%--页脚 --%>
		<jsp:include page="/WEB-INF/jsps/footer.jsp"></jsp:include>
    </div>
</div>

<div class="page-loading-overlay">
    <div class="loader-2"></div>
</div>
<div class="modal fade" id="add">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">通过审核</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="field-1" class="control-label">光谱类型编号</label>
                            <input type="text" class="form-control" id="field-1" placeholder="xxxxxx" >
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="field-1" class="control-label">光谱类型名称</label>
                            <input type="text" class="form-control" id="field-1" placeholder="xxxxxx" >
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-white" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="detail">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">通过审核</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="field-1" class="control-label">光谱类型编号</label>
                            <input type="text" class="form-control" id="field-1" placeholder="xxxxxx" disabled>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="field-1" class="control-label">光谱类型名称</label>
                            <input type="text" class="form-control" id="field-1" placeholder="xxxxxx" disabled>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>

<%-- 尾部内容 --%>
<jsp:include page="/WEB-INF/jsps/template_tail.jsp" />
        
<!-- Imported styles on this page -->
<link rel="stylesheet" href="assets/js/datatables/dataTables.bootstrap.css">
<!-- Imported scripts on this page -->
<script src="assets/js/datatables/js/jquery.dataTables.min.js"></script>
<script src="assets/js/datatables/dataTables.bootstrap.js"></script>
<script src="assets/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
<!--Specific JS for this page-->
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $("#example-1").dataTable({
            aLengthMenu: [
                [5, 10, 25, 50, 100, -1],
                [5, 10, 25, 50, 100, "所有"]
            ]
        });
        $("#example-2").dataTable({
            aLengthMenu: [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, "All"]
            ]
        });
        // Replace checkboxes when they appear
        var $state = $("#example-2 thead input[type='checkbox']");

        $("#example-2").on('draw.dt', function() {
            cbr_replace();

            $state.trigger('change');
        });

        // Script to select all checkboxes
        $state.on('change', function(ev) {
            var $chcks = $("#example-2 tbody input[type='checkbox']");

            if($state.is(':checked')) {
                $chcks.prop('checked', true).trigger('change');
            } else {
                $chcks.prop('checked', false).trigger('change');
            }
        });
    });
</script>
</body>

</html>